<template>
  <view style="display: flex; flex-wrap: wrap">
    <view v-for="(item, index) in imageList" style="position: relative; width: 198rpx; height: 198rpx; display: inline-block; margin: 30rpx 0 0 40rpx">
      <image :src="'https://qn.boruichengyi.com' + item" class="imageitem" mode="aspectFill" @click="preimage"></image>
      <view class="del" @click="delimage(index)">
        <uni-icons type="closeempty" color="#fff" size="10"></uni-icons>
      </view>
    </view>

    <view class="upload" @click="openablum">
      <uni-icons type="plusempty" color="#999999" size="30" style="margin: 0 0 20rpx 66rpx"></uni-icons>
      <view style="text-align: center; font-size: 28rpx; margin-top: 10rpx">上传图片</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageList: []
    };
  },
  onLoad() {
    this.getuserinfo();
  },
  methods: {
    // 预览个人相册图片
    preimage() {
      let imgarr = [];
      imgarr = this.imageList.map((item) => {
        return 'https://qn.boruichengyi.com' + item;
      });
      uni.previewImage({
        urls: imgarr
      });
    },
    // 获取个人信息
    async getuserinfo() {
      const res = await uni.$http.post('user/index', {
        user_id: JSON.parse(uni.getStorageSync('userinfo')).user_id,
        token: JSON.parse(uni.getStorageSync('userinfo')).token
      });
      if (res.data.data.images == '') {
        return;
      }
      this.imageList = res.data.data.images.split(',');
    },
    // 打开相册
    openablum() {
      uni.chooseMedia({
        count: 1,
        mediaType: ['image'],
        sourceType: ['album', 'camera'],
        sizeType: ['original', 'compressed'],
        camera: 'front',
        success: (res) => {
          // 选择玩之后调用上传图片方法
          uni.uploadFile({
            url: 'https://activity.jiangkukeji.cn/api/common/upload',
            filePath: res.tempFiles[0].tempFilePath,
            name: 'file',
            formData: {
              token: JSON.parse(uni.getStorageSync('userinfo') || '{}').token
            },
            success: async (res2) => {
              const data = JSON.parse(res2.data);
              if (data.code == 1) {
                uni.hideLoading();
                this.imageList.push(data.data.url);

                const res = await uni.$http.post('user/profile', {
                  images_arr: this.imageList.join(','),
                  token: JSON.parse(uni.getStorageSync('userinfo')).token
                });
              } else {
                uni.hideLoading();
                uni.showToast({
                  title: '图片上传失败',
                  icon: 'none'
                });
              }
            }
          });
        }
      });
    },
    // 删除图片
    delimage(index) {
      this.imageList.splice(index, 1);
      uni.$http.post('user/profile', {
        images_arr: this.imageList.length == 0 ? '1' : this.imageList.join(','),
        token: JSON.parse(uni.getStorageSync('userinfo')).token
      });
    }
  }
};
</script>

<style lang="less">
.upload {
  box-sizing: border-box;
  display: inline-block;
  width: 192rpx;
  height: 192rpx;
  background: #f8f8f8;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  padding-top: 40rpx;
  margin: 40rpx;
}
.imageitem {
  box-sizing: border-box;
  width: 198rpx;
  height: 198rpx;
  background: #ffffff;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.del {
  box-sizing: border-box;
  position: absolute;
  right: -10rpx;
  top: -15rpx;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  text-align: center;
  line-height: 35rpx;
  background-color: red;
}
</style>
